<template>
  <el-table :data="rankList" stripe style="width: 100%">
    <el-table-column label="排名" align="center" type="index" />

    <el-table-column prop="name" label="队标" align="center">
      <template slot-scope="scope">
        <img
          style="width: 100px; height: 100px ;border-radius: 50%;"
          :src="scope.row.url"
          :fit="fit"
        />
      </template>
    </el-table-column>
    <el-table-column label="名称">
      <template slot-scope="scope">
        <div>{{ scope.row.name }}</div>
      </template>
    </el-table-column>
    <el-table-column label="昵称">
      <template slot-scope="scope">
        <div>{{ scope.row.tags }}</div>
      </template>
    </el-table-column>
    <el-table-column label="积分">
      <template slot-scope="scope">
        <div>{{ scope.row.integration }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    rankList: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style scoped>
.rank-badge {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #00e4ff, #00cfff);
  color: #001529;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 228, 255, 0.4);
}
</style>